<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script type="application/javascript" src="js/jquery-3.5.1.js"></script>
</head>
<body>
邮箱：<input id="email" type="email"/><br/>
密码：<input id="password" type="password"/><br/>
确认密码：<input id="repassword" type="password"/><br/>
验证码：<input id="code"/> <a id="codeButton" href="#">获取验证码</a><br/>
<input id="register" type="button" value="注册">
</body>
<script type="application/javascript">
    var second = 60;

    $(function () {
        $('#codeButton').bind('click', code);

        /**
         * 绑定注册事件
         */
        $("#register").bind('click', function () {
            var email = $("#email").val();
            var password = $("#password").val();
            var repassword = $("#repassword").val();
            var code = $("#code").val();
            if (email == "") {
                alert("请填写邮箱");
                return;
            }
            if (password == "") {
                alert("请填写密码");
                return;
            }
            if (repassword == "") {
                alert("请填写确认密码");
                return;
            }
            if (code == "") {
                alert("请填写验证码");
                return;
            }
            $.get("/api/user/register/" + email + "/" + password + "/" + code, function (data) {
                if (data.flag) {
                    window.location.href = "/static/welcome.html";
                } else {
                    alert(data.msg);
                }
            });
        })

    });

    /**
     * 获取验证码
     */
    function code() {
        console.log("获取验证码事件触发");
        if ($("#email").val() == "") {
            alert("请先输入邮箱地址");
            return;
        }
        $.get("/api/code/create/" + $("#email").val(), function (data) {
            if (data) {
                alert("验证码发送到注册邮箱成功");
            } else {
                alert("验证码发送失败");
            }
        })
        //解绑a的点击时间
        $('#codeButton').unbind('click', code);
        $("#codeButton").html(second + "s后重新发送验证码");
        //设置1s的定时器，显示倒计时
        setTimeout(countdown, 1000);
    }

    function countdown() {
        second = second - 1;
        if (second == 0) {
            //倒计时结束后，重新绑定事件
            $('#codeButton').bind('click', code);
            $("#codeButton").html("获取验证码");
            second = 60;
        } else {
            $("#codeButton").html(second + "s后重新发送验证码");
            setTimeout(countdown, 1000);
        }
    }

</script>
</html>